<template>
	<view class="gy-im-message">
		<com-divider v-if="props.msg.scene === 'no-data'" text="暂无更多" />
		<com-timetext v-if="props.msg.scene === 'times'" :text="props.msg.text" />
		<com-im-tips v-if="props.msg.scene === 'overConsultation'" :text="overTips" />
		<com-im-tips v-if="props.msg.scene === 'startConsultation'" :text="startTips" />
		<com-im-tips v-if="props.msg.scene === 'applyConsultation'" :text="applyTips" />
		<com-im-tips v-if="props.msg.scene === 'forwardConsultation'" :text="forwardTips" />
		<com-im-tips v-if="props.msg.scene === 'deniedConsultation'" :text="deniedTips" />
		<com-im-tips v-if="props.msg.type === 'tip'" :text="props.msg.text" />
		<view v-if="props.msg.scene === 'p2p' && props.msg.type != 'tip'" class="gy-im-message-item" :class="{self: myCount ===  props.msg.from}">
			<view class="gy-im-message-content">

				<view v-if="['loading', 'text', 'textBr', 'audio', 'select', 'image', 'video', 'aiQaResult', 'aiPreconsultText', 'aiRobotText'].indexOf(props.msg.type) !== -1" style="max-width: calc(100% - 200rpx);">

					<view v-if="props.msg.type === 'loading'" class="loading-msg">
						<com-loading-icon :size="28" />
						<!-- <u-loading mode="flower" color="#ffffff" size="38rpx" /> -->
						<view class="step">
							<text style="--i:1">正</text>
							<text style="--i:2">在</text>
							<text style="--i:3">思</text>
							<text style="--i:4">考</text>
							<text style="--i:5;">中</text>
							<text style="--i:6;padding-left: 8rpx;">.</text>
							<text style="--i:7;padding-left: 8rpx;">.</text>
							<text style="--i:8;padding-left: 8rpx;">.</text>
						</view>
					</view>

					<view v-if="props.msg.type === 'text'" class="text-msg">
						<template v-for="(item, index) in parseText(props.msg.text)" :key="index">
							  <template v-if="item.type === 'text'">
								{{item.value}}
							  </template>
							  <template v-else-if="item.type === 'emoji'">
								<Icon
								  :type="transEmoji(item.value)"
								  size="22"
								  :style="{ margin: '0 2px 2px 2px', verticalAlign: 'bottom' }"
								/>
							  </template>
						</template>
					</view>
					
					<view v-if="props.msg.type === 'textBr'" class="text-msg">
						<template v-for="(item, index) in parseText(props.msg.text)" :key="index">
							<template v-if="item.type === 'text'">
								<view v-html="item.value"></view>
							</template>
						</template>
					</view>

					<view v-if="props.msg.type === 'audio'" class="text-msg" @click.stop='playAudio'>
						{{ props.msg.from==='0' ? '' : Math.ceil(props.msg.attach.dur/1000)+'″' }}
						<a-trumpet :isPlay="isplay" :direction="props.msg.from==='1'?'left':'right'" :color="props.msg.from==='1'?'#ffffff':'#000000'" />
						{{ props.msg.from==='0' ? Math.ceil(props.msg.attach.dur/1000)+'″' : '' }}
					</view>

					<view v-if="props.msg.type === 'select'" class="text-msg msg-panel">
						<text>{{ props.msg.text }}</text>
						<view class="msg-panel-action">
							<view></view>
							<view class="msg-panel-action-btn" @click.stop="selectFn">
								<text>立即选择</text>
								<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'image'" class="image-msg" @click.stop="previewImageFn(props.msg.attach.url)">
						<image class="image" mode="widthFix"  :src="proxy.utils.image.fullPath(props.msg.attach.url)"></image>
					</view>

					<view v-if="props.msg.type === 'video'" class="image-msg" >
						<video class="image" mode="widthFix"  :src="proxy.utils.image.fullPath(props.msg.attach.url)"></video>
					</view>

					<view v-if="props.msg.type === 'aiQaResult'" class="ai-qa-result msg-panel" @click.stop="">
						<view class="ai-qa-result-tips">{{ props.msg.text }}</view>
						<view class="ai-qa-result-list">
							<view class="ai-qa-result-item" v-for="(item,index) in props.msg.form.list" :key="index" @click.stop="selectFn(item)">
								{{ item.name }}（{{ item.data_category_text }}）
							</view>
						</view>
					</view>

					<view v-if="props.msg.praiseId && myCount !==  props.msg.from" class="msg-praise" @click.stop="">
						<view @click.stop="emits('praise', 1, props.index)">
							<text class="gy_icon_praise_full"></text>
						</view>
						<view @click.stop="emits('praise', 0, props.index)">
							<text class="gy_icon_praise_full"></text>
						</view>
					</view>

					<view v-if="props.msg.type === 'aiPreconsultText' || props.msg.type === 'aiRobotText'" class="text-msg">
						<template v-for="(item, index) in parseText(props.msg.text)" :key="index">
							  <template v-if="item.type === 'text'">
								{{item.value}}
							  </template>
							  <template v-else-if="item.type === 'emoji'">
								<Icon
								  :type="transEmoji(item.value)"
								  size="22"
								  :style="{ margin: '0 2px 2px 2px', verticalAlign: 'bottom' }"
								/>
							  </template>
						</template>
					</view>

				</view>

				<view v-if="['link', 'aiGuidanceResult', 'preDiagnosisReport', 'preDiagnosisReport2', 'consultationReport', 'prescription', 'hosp-certificate', 'inspect', 'news', 'advise'].indexOf(props.msg.type) !== -1" style="width: calc(100% - 200rpx);">

					<view v-if="props.msg.type === 'link'" class="link-msg msg-panel" @click.stop="toLinkPageFn(props.msg.form)">
						<view class="link-msg-title">{{ props.msg.text }}</view>
						<view class="msg-panel-action">
							<view class="msg-panel-action-btn">
								<text>立即前往</text>
								<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'aiGuidanceResult'" class="ai-guidance-result msg-panel" @click.stop="">
						<view class="ai-guidance-result-tips">根据您描述的症状，为您推荐下面科室进行问诊或挂号。 </view>
						<view class="ai-guidance-result-list">
							<view class="ai-guidance-result-item" v-for="(item, index) in props.msg.form.list" :key="index">
								<view class="ai-guidance-result-dept">{{ item.name }}</view>
								<view class="ai-guidance-result-btns">
									<view @click.stop="proxy.utils.uni.route.go('/pages-hospital-services/appointment-doctor/select-doctor?departmentId=' + item.code + '&type=2&departmentName=' + item.name)">
										预约挂号
										<text class="gy_icon_arrowRight"></text>
									</view>
									<view @click.stop="proxy.utils.uni.route.go('/pages-hospital-services/departmentsIntroduce/index?id=' + item.id)">
										在线问诊
										<text class="gy_icon_arrowRight"></text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'preDiagnosisReport'" class="pre-diagnosis-report msg-panel" @click.stop="">
						<view class="msg-panel-title">预诊报告单</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.form.chiefComplaint">
							<view class="pre-diagnosis-report-label">主诉</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.form.chiefComplaint }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.form.hpi">
							<view class="pre-diagnosis-report-label">现病史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.form.hpi }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.form.elapseHis">
							<view class="pre-diagnosis-report-label">既往史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.form.elapseHis }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.form.allergicHistory">
							<view class="pre-diagnosis-report-label">过敏史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.form.allergicHistory }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.form.individualHis">
							<view class="pre-diagnosis-report-label">个人史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.form.individualHis }}</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'preDiagnosisReport2'" class="pre-diagnosis-report msg-panel" @click.stop="">
						<view class="msg-panel-title">预诊报告单</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.attach.data.mainSuit">
							<view class="pre-diagnosis-report-label">主诉</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.mainSuit }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.attach.data.historyIllness">
							<view class="pre-diagnosis-report-label">现病史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.historyIllness }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.attach.data.previousHistory">
							<view class="pre-diagnosis-report-label">既往史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.previousHistory }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.attach.data.allergicHistory">
							<view class="pre-diagnosis-report-label">过敏史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.allergicHistory }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if="props.msg.attach.data.individualHis">
							<view class="pre-diagnosis-report-label">个人史</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.individualHis }}</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'consultationReport'" class="pre-diagnosis-report msg-panel" @click.stop="">
						<view class="msg-panel-title">问诊单</view>
						<view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">病情描述</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.diseaseDescriptionText }}</view>
						</view>
						<view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">是否复诊</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.ifReturnVisit === 1 ?'是':'否'}}</view>
						</view>
						<!-- <view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">患病时长</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.illnessDuration }}</view>
						</view> -->
						<view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">上次确诊诊断</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.lastDiagnosis }}</view>
						</view>
						<view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">上次就医医院</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.lastVisitHospital }}</view>
						</view>
						<!-- <view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">上次就诊日期</view>
							<view class="pre-diagnosis-report-value">{{ proxy.utils.date.format(props.msg.attach.data.lastVisitDate,'yyyy.MM.dd') }}</view>
						</view>
						<view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">是否神志清楚</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.ifSanity === 1 ?'是':'否' }}</view>
						</view> -->
						<!-- <view class="pre-diagnosis-report-item">
							<view class="pre-diagnosis-report-label">曾在本院住院</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.inHospitalHere === 1 ?'是':'否' }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if='props.msg.attach.data.inHospitalHere === 1'>
							<view class="pre-diagnosis-report-label">住院科室</view>
							<view class="pre-diagnosis-report-value">{{ props.msg.attach.data.inpatientDepartment }}</view>
						</view>
						<view class="pre-diagnosis-report-item" v-if='props.msg.attach.data.inHospitalHere === 1'>
							<view class="pre-diagnosis-report-label">住院日期</view>
							<view class="pre-diagnosis-report-value">{{ proxy.utils.date.format(props.msg.attach.data.inpatientDate,'yyyy.MM.dd') }}</view>
						</view> -->
					</view>

					<view v-if="props.msg.type === 'prescription'" class="prescription-msg msg-panel" @click.stop="toPrescriptionList">
						<view class="msg-panel-title">处方单</view>
						<view class="prescription-msg-diagnosis">诊断：{{props.msg.attach.data.diagnosisName}}</view>
						<com-divider text="" />
						<view class="prescription-msg-drug" v-for="(item,index) in props.msg.attach.data.drugs" :key="index">
							<view class="prescription-msg-drug-name">{{item.name}}</view>
							<view class="prescription-msg-drug-number">x{{item.num}}</view>
						</view>
						<view class="msg-panel-action">
							<view class="msg-panel-action-money">
								药品费用 <com-price-text :price="props.msg.attach.data.price/100" />
							</view>
							<view class="msg-panel-action-btn">
								<text>去支付</text>
								<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'hosp-certificate'" class="hosp-certificate-msg msg-panel" @click.stop="inHospitalDetail(props.msg.attach.data.id)">
						<view class="msg-panel-title">住院证</view>
						<view class="hosp-certificate-msg-diagnosis">诊断：{{props.msg.attach.data.diagnosisName}}</view>
						<com-divider text="" />
						<view class="hosp-certificate-msg-content">
							<view class="hosp-certificate-msg-dept">{{props.msg.attach.data.inpatientWardName}}</view>
						</view>
						<view class="msg-panel-action">
							<view></view>
							<view class="msg-panel-action-btn">
								<text>查看详情</text>
								<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'inspect'" class="inspect-msg msg-panel" @click.stop="toInspectList">
						<view class="msg-panel-title">检验检查</view>
						<view class="inspect-msg-diagnosis">诊断：{{props.msg.attach.data.diagnosisName}}</view>
						<view class="inspect-msg-diagnosis">项目：{{props.msg.attach.data.inspectionName}}</view>
						<com-divider text="" />
						<view class="inspect-msg-item">{{props.msg.attach.data.departmentName}}</view>
						<view class="msg-panel-action">
							<view class="msg-panel-action-money">
								检查费用 <com-price-text :price="props.msg.attach.data.price/100" />
							</view>
							<view class="msg-panel-action-btn">
								<text>去支付</text>
								<com-icon name="gy_icon_arrowRight" :size="24" color="#999999" />
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'news'" class="news-msg msg-panel" @click.stop="viewArticle(props.msg.attach.data.id)">
						<view class="msg-panel-title">{{props.msg.attach.data.title}}</view>
						<view class="news-msg-box">
							<view class="news-msg-info">
								<view class="news-msg-synopsis"></view>
								<view class="news-msg-user">
									<com-avatar :size="40" :radius="20" :src="props.msg.attach.data.avatar"  />
									<view class="news-msg-user-name">{{props.msg.attach.data.name}}</view>
									<view class="news-msg-user-title">{{props.msg.attach.data.positionName}}</view>
								</view>
							</view>
							<view class="news-msg-cover">
								<com-image style="width: 180rpx;" mode="" :height="140" :src="props.msg.attach.data.converImg" />
							   <!-- <view class="news-msg-cover-tag primary">健康科普</view>
								<view class="news-msg-cover-play">
									<com-icon name="gy_icon_play" color="#ffffff" :size="36" />
								</view> -->
							</view>
						</view>
					</view>

					<view v-if="props.msg.type === 'advise'" class="advise-msg msg-panel" @click.stop="">
						<view class="msg-panel-title">诊后建议</view>
						<view class="advise-msg-content">{{props.msg.attach.data.proposalMsg}}</view>
					</view>

					<view v-if="props.msg.praiseId && myCount !==  props.msg.from" class="msg-praise" @click.stop="">
						<view @click.stop="emits('praise', 1, props.index)">
							<text class="gy_icon_praise_full"></text>
						</view>
						<view @click.stop="emits('praise', 0, props.index)">
							<text class="gy_icon_praise_full"></text>
						</view>
					</view>

				</view>

				<view class="avatar">
					<com-avatar :src="props.msg.fromAvatar" :size="80" :radius="40" />
				</view>
			</view>
			
			<com-im-tips v-if="props.msg.type === 'aiPreconsultText'" :text="preconsultTips" />
			
			<com-im-tips v-if="props.msg.type === 'aiRobotText'" :text="robotTips" />
			
			<!-- <view class="time">{{ __dateWxFilter(props.msg.time) }}</view> -->
			<view v-if="props.msg.type === 'times'" class="gy-im-message-time">{{ props.msg.text }}</view>
			
		</view>
	</view>
</template>

<script lang="ts" setup>

	import {
		ref,
		computed,
		getCurrentInstance,
		onMounted,
		onUnmounted
	} from "vue";
	import ATrumpet from "@/uni_modules/a-trumpet/components/a-trumpet/a-trumpet.vue";

	import { parseText } from '../../utils/im/parseText'

	import Icon from '../im/face.vue';

	const { proxy }: any = getCurrentInstance();

	const emits = defineEmits(["select", "praise"]);

    const props = defineProps({
        msg:{
        	type: Object,
        	default: () => {}
        },
		index:{
			type: Number,
			default: 0
		}
    });

	const patient = computed(() => proxy.store.patient.current);

	const myCount = ref("1");

	const startTips = ref("医生已接诊，请及时追问。咨询过程中，医生可能会由于医疗工作暂时离开，您可以详尽的描述您的问题，医生回复后我们会第一时间通知您。")
	const overTips = ref("您的问诊结束，请查看诊后建议")
	const applyTips = ref("您发起了问诊，请等待接诊")
	const forwardTips = ref("医生将您的问诊请求已经转诊")
	const deniedTips = ref("医生已经拒诊，问诊费用已经原路退款")
	const preconsultTips = ref("注：您可以随时结束对话并进入下一个模块，或生成预问诊结果，您提供的信息将有助于医生的诊疗判断。")
	const robotTips = ref("重要提示：AI回答仅做学习参考，请务必咨询专业医生。")
	const isplay = ref(false)

	const innerAudioContext = uni.createInnerAudioContext();

	function previewImageFn(url:string){
		uni.previewImage({
		    current: url,
		    urls: [url]
		})
	}

	function toLinkPageFn(msgForm: any){
		if(msgForm.link.startsWith("/pages")){
			if(msgForm.intent === "find_department"){
				proxy.utils.uni.route.go(msgForm.link, {
					message: msgForm.message
				});
			}else{
				proxy.utils.uni.route.go(msgForm.link);
			}
		}
		if(msgForm.link.startsWith("http")){
			if(msgForm.intent === "appointment_register"){
				proxy.utils.uni.route.go("/pages-system/web-view/index", {
					title: '',
					url: encodeURIComponent(proxy.utils.url.params.append(msgForm.link, {
						pkPi: patient.value.pkPi,
						id: patient.value.hisCode,
						idNo: patient.value.idNumber,
						namePi: patient.value.name
					}))
				});
			}else{
				proxy.utils.uni.route.go("/pages-system/web-view/index", {
					title: '',
					url: encodeURIComponent(msgForm.link)
				});
			}
		}
	}

	function selectFn(item?: any){
		emits("select", item);
	}

	const emojiData = ref([{
			"face": "[大笑]",
			"icon": "icon-a-1"
		},
		{
			"face": "[开心]",
			"icon": "icon-a-2"
		},
		{
			"face": "[色]",
			"icon": "icon-a-3"
		},
		{
			"face": "[酷]",
			"icon": "icon-a-4"
		},
		{
			"face": "[奸笑]",
			"icon": "icon-a-5"
		},
		{
			"face": "[亲]",
			"icon": "icon-a-6"
		},
		{
			"face": "[伸舌头]",
			"icon": "icon-a-7"
		},
		{
			"face": "[眯眼]",
			"icon": "icon-a-8"
		},
		{
			"face": "[可爱]",
			"icon": "icon-a-9"
		},
		{
			"face": "[鬼脸]",
			"icon": "icon-a-10"
		},
		{
			"face": "[偷笑]",
			"icon": "icon-a-12"
		},
		{
			"face": "[喜悦]",
			"icon": "icon-a-13"
		},
		{
			"face": "[狂喜]",
			"icon": "icon-a-14"
		},
		{
			"face": "[惊讶]",
			"icon": "icon-a-15"
		},
		{
			"face": "[流泪]",
			"icon": "icon-a-16"
		},
		{
			"face": "[流汗]",
			"icon": "icon-a-17"
		},
		{
			"face": "[天使]",
			"icon": "icon-a-18"
		},
		{
			"face": "[笑哭]",
			"icon": "icon-a-19"
		},
		{
			"face": "[尴尬]",
			"icon": "icon-a-20"
		},
		{
			"face": "[惊恐]",
			"icon": "icon-a-21"
		},
		{
			"face": "[大哭]",
			"icon": "icon-a-22"
		},
		{
			"face": "[烦躁]",
			"icon": "icon-a-23"
		},
		{
			"face": "[恐怖]",
			"icon": "icon-a-24"
		},
		{
			"face": "[两眼冒星]",
			"icon": "icon-a-25"
		},
		{
			"face": "[害羞]",
			"icon": "icon-a-26"
		},
		{
			"face": "[睡着]",
			"icon": "icon-a-27"
		},
		{
			"face": "[冒星]",
			"icon": "icon-a-28"
		},
		{
			"face": "[口罩]",
			"icon": "icon-a-29"
		},
		{
			"face": "[ok]",
			"icon": "icon-a-30"
		},
		{
			"face": "[好吧]",
			"icon": "icon-a-31"
		},
		{
			"face": "[鄙视]",
			"icon": "icon-a-32"
		},
		{
			"face": "[难受]",
			"icon": "icon-a-33"
		},
		{
			"face": "[不屑]",
			"icon": "icon-a-34"
		},
		{
			"face": "[不舒服]",
			"icon": "icon-a-35"
		},
		{
			"face": "[愤怒]",
			"icon": "icon-a-36"
		},
		{
			"face": "[鬼怪]",
			"icon": "icon-a-37"
		},
		{
			"face": "[发怒]",
			"icon": "icon-a-38"
		},
		{
			"face": "[不高兴]",
			"icon": "icon-a-39"
		},
		{
			"face": "[皱眉]",
			"icon": "icon-a-40"
		},
		{
			"face": "[心碎]",
			"icon": "icon-a-41"
		},
		{
			"face": "[心动]",
			"icon": "icon-a-42"
		},
		{
			"face": "[好的]",
			"icon": "icon-a-43"
		},
		{
			"face": "[低级]",
			"icon": "icon-a-44"
		},
		{
			"face": "[赞]",
			"icon": "icon-a-45"
		},
		{
			"face": "[鼓掌]",
			"icon": "icon-a-46"
		},
		{
			"face": "[给力]",
			"icon": "icon-a-47"
		},
		{
			"face": "[打你]",
			"icon": "icon-a-48"
		},
		{
			"face": "[阿弥陀佛]",
			"icon": "icon-a-49"
		},
		{
			"face": "[拜拜]",
			"icon": "icon-a-50"
		},
		{
			"face": "[第一]",
			"icon": "icon-a-51"
		},
		{
			"face": "[拳头]",
			"icon": "icon-a-52"
		},
		{
			"face": "[手掌]",
			"icon": "icon-a-53"
		},
		{
			"face": "[剪刀]",
			"icon": "icon-a-54"
		},
		{
			"face": "[招手]",
			"icon": "icon-a-55"
		},
		{
			"face": "[不要]",
			"icon": "icon-a-56"
		},
		{
			"face": "[举着]",
			"icon": "icon-a-57"
		},
		{
			"face": "[思考]",
			"icon": "icon-a-58"
		},
		{
			"face": "[猪头]",
			"icon": "icon-a-59"
		},
		{
			"face": "[不听]",
			"icon": "icon-a-60"
		},
		{
			"face": "[不看]",
			"icon": "icon-a-61"
		},
		{
			"face": "[不说]",
			"icon": "icon-a-62"
		},
		{
			"face": "[猴子]",
			"icon": "icon-a-63"
		},
		{
			"face": "[炸弹]",
			"icon": "icon-a-64"
		},
		{
			"face": "[筋斗云]",
			"icon": "icon-a-65"
		},
		{
			"face": "[火箭]",
			"icon": "icon-a-66"
		},
		{
			"face": "[救护车]",
			"icon": "icon-a-67"
		},
		{
			"face": "[便便]",
			"icon": "icon-a-70"
		}
	]);

	function transEmoji(msg:string) {
		for(let i = 0;i<emojiData.value.length;i++){
			let item = emojiData.value[i]
			if (item.face === msg) {
				return item.icon
			}
		}
	}

	function playAudio() {
		uni.$emit("stopVoice")
		setTimeout(function(){
			innerAudioContext.src = props.msg.attach.url
			innerAudioContext.play()
			innerAudioContext.onPlay(() => {
				isplay.value = true
			});
			innerAudioContext.onError((res) => {
			  isplay.value = false
			});
			innerAudioContext.onEnded(()=>{
				isplay.value = false
			})
			innerAudioContext.onStop(()=>{
				isplay.value = false
			})
		},100)
	}

	function stopVoice() {
		innerAudioContext.stop()
	}


	function viewArticle(id:string) {
		proxy.utils.uni.route.go("/pages-system/news/details?id=" + id);
	}

	function toPrescriptionList() {
		proxy.utils.uni.route.go("/pages-personal/my-prescription/index");
	}

	function toInspectList() {
		proxy.utils.uni.route.go("/pages-hospital-services/inspect/appointment/list");
	}

	function inHospitalDetail(id:string) {
		proxy.utils.uni.route.go("/pages-hospital-services/in-hospital/certificate/details?id="+id);
	}

	onMounted(() => {
	    // 监听事件
		if (props.msg.type === 'audio') {
			uni.$on('stopVoice',function(){
				stopVoice()
			})
		}
	})

	onUnmounted(() => {
	    // 监听事件  \
		if (props.msg.type === 'audio') {
			uni.$off('stopVoice')
		}
	})

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>

	.gy-im-message{
		margin: var(--gy-gap);
		.gy-im-message-item{
			.gy-im-message-content{
				display: flex;
				justify-content: flex-end;
				flex-direction: row-reverse;
				.msg-panel{
					width: 100%;
					padding: var(--gy-gap);
					border-bottom-right-radius: var(--gy-border-radius-large);
					border-bottom-left-radius: var(--gy-border-radius-large);
					border-top-right-radius: var(--gy-border-radius-large);
					background: linear-gradient(180deg, #D4E3FC 0%, #FEFEFE 38%, #FFFFFF 100%);
					.msg-panel-title{
						font-weight: bold;
						color: var(--gy-text-color-primary);
						font-size: var(--gy-font-size-medium);
					}
					:deep(.gy-divider){
						margin: 20rpx 0;
						text-align: center;
						.gy-divider-line{
							background-color: var(--gy-card-line-color) !important;
						}
					}
					.msg-panel-action{
						margin-top: 20rpx;
						@include flex-between-center;
						color: var(--gy-text-color-regular);
						.msg-panel-action-money{
							@include flex-start-center;
							:deep(.gy-price-text){
							    margin-left: 10rpx;
							}
						}
						.msg-panel-action-btn{
							@include flex-end-center;
							padding-left: 10rpx;
							border-radius: var(--gy-border-radius-medium);
							text {
							    font-size: var(--gy-font-size-base);
							    padding-bottom: 3rpx;
							}
							:deep(.gy-icon){
								display: block;
							    margin-left: 5rpx;
								color: var(--gy-text-color-regular) !important;
							}
						}
					}
				}
				.loading-msg{
					background-color: #ffffff;
					padding: 20rpx;
					font-size: 30rpx;
					line-height: 40rpx;
					border-bottom-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					color: #a9a9a9;
					display: flex;
					align-items: center;
					.ai-loading-animation{
						width: 34rpx;
						height: 34rpx;
						svg{
							width: 34rpx;
							height: 34rpx;
							-webkit-animation: e-loading-icon 1.5s infinite;
							animation: e-loading-icon 1.5s infinite ease-in-out;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							fill: #999999;
						}
						@keyframes e-loading-icon {
							0% {
								-webkit-transform: rotate(0deg);
								transform: rotate(0deg);
							}

							to {
								-webkit-transform: rotate(1turn);
								transform: rotate(1turn);
							}
						}
					}
					.step {
					    position: relative;
						padding: 0 10rpx;
					    // -webkit-box-reflect: below -12rpx linear-gradient(transparent, rgba(0, 0, 0, 0.2));
					}
					.step text {
					    position: relative;
					    display: inline-block;
					    animation: animate 1s ease-in-out infinite;
					    animation-delay: calc(.1s*var(--i))
					}
					@keyframes animate {
					    0% {
					        transform: translateY(0px)
					    }

					    20% {
					        transform: translateY(-16rpx)
					    }

					    40%,
					    100% {
					        transform: translateY(0px)
					    }
					}
				}
				.text-msg{
					max-width: 100%;
					background-color: #FFFFFF;
					padding: 20rpx;
					font-size: 30rpx;
					line-height: 40rpx;
					border-bottom-right-radius: var(--gy-border-radius-large);
					border-bottom-left-radius: var(--gy-border-radius-large);
					border-top-right-radius: var(--gy-border-radius-large);
					word-break: break-word;
					a{
						color: var(--gy-color-primary);
						padding: 0 10rpx;
					}
				}
				.image-msg{
					max-width: 100%;
					display: flex;
					.image{
						max-width: 300rpx;
						display: inline;
						border-bottom-right-radius: var(--gy-border-radius-large);
						border-bottom-left-radius: var(--gy-border-radius-large);
						border-top-right-radius: var(--gy-border-radius-large);
					}
				}
				.pre-diagnosis-report{
					.pre-diagnosis-report-item{
						margin-top: 20rpx;
						@include flex;
						font-size: var(--gy-font-size-base);
						.pre-diagnosis-report-label{
							width: 180rpx;
							color: var(--gy-text-color-regular);
						}
						.pre-diagnosis-report-value{
							flex: 1;
							color: var(--gy-text-color-secondary);
						}
					}
				}
				.link-msg{
					.msg-panel-action{
						@include flex-end-center;
					}
				}
				.ai-guidance-result{
					.ai-guidance-result-tips{
						font-size: var(--gy-font-size-base);
					}
					.ai-guidance-result-list{
						margin-top: 20rpx;
						.ai-guidance-result-item{
							.ai-guidance-result-dept{
								font-weight: bold;
								font-size: var(--gy-font-size-medium);
							}
							.ai-guidance-result-btns{
								margin-top: 15rpx;
								display: grid;
								grid-template-columns: repeat(1, 1fr);
								gap: 20rpx;
								view{
									height: 70rpx;
									@include flex-between-center;
									padding: 0 10rpx 0 20rpx;
									border: 1rpx solid var(--gy-card-line-color);
									font-size: var(--gy-font-size-base);
									border-radius: var(--gy-border-radius-medium);
									background-color: #FFFFFF;
									text{
										font-size: 24rpx;
									}
								}
							}
						}
						.ai-guidance-result-item+.ai-guidance-result-item{
							margin-top: 20rpx;
						}
					}
				}
				.ai-qa-result{
					.ai-qa-result-tips{
						font-size: var(--gy-font-size-medium);
					}
					.ai-qa-result-list{
						margin-top: 20rpx;
						.ai-qa-result-item{
							color: var(--gy-color-primary);
							font-size: var(--gy-font-size-base);
							text-decoration: underline;
						}
						.ai-qa-result-item+.ai-qa-result-item{
							margin-top: 20rpx;
						}
					}
				}
				.prescription-msg{
					.prescription-msg-diagnosis{
						margin-top: 15rpx;
						font-size: var(--gy-font-size-base);
						font-weight: 400;
					}
					.prescription-msg-drug{
						@include flex-between-center;
						font-size: var(--gy-font-size-base);
						.prescription-msg-drug-name{
							font-weight: bold;
							color: var(--gy-text-color-primary);
						}
						.prescription-msg-drug-number{
							color: var(--gy-text-color-secondary);
						}
					}
					.prescription-msg-drug+.prescription-msg-drug{
						margin-top: 10rpx;
					}
				}
				.hosp-certificate-msg{
					.hosp-certificate-msg-diagnosis{
						margin-top: 15rpx;
						font-size: var(--gy-font-size-base);
						font-weight: 400;
					}
					.hosp-certificate-msg-content{
						@include flex-between-center;
						font-size: var(--gy-font-size-base);
						.hosp-certificate-msg-dept{
							font-weight: bold;
							color: var(--gy-text-color-primary);
						}
						.hosp-certificate-msg-bed{
							color: var(--gy-text-color-secondary);
						}
					}
				}
				.inspect-msg{
					.inspect-msg-diagnosis{
						margin-top: 15rpx;
						font-size: var(--gy-font-size-base);
						font-weight: 400;
					}
					.inspect-msg-item{
						font-size: var(--gy-font-size-base);
						font-weight: bold;
						color: var(--gy-text-color-primary);
					}
					.inspect-msg-item+.inspect-msg-item{
						margin-top: 10rpx;
					}
				}
				.news-msg{
					.msg-panel-title{
						@include text-ellipsis(1);
					}
					.news-msg-box{
						margin-top: 15rpx;
						@include flex-between-center;
						.news-msg-info{
						    flex: 1;
							@include flex-between;
							flex-direction: column;
						    height: 120rpx;
						    padding-right: var(--gy-gap);
						    .news-msg-synopsis{
						        color: var(--gy-text-color-regular);
						        font-size: var(--gy-font-size-small);
						        @include text-ellipsis(2);
						    }
							.news-msg-user{
								@include flex-start-center;
								font-weight: 400;
								color: var(--gy-text-color-secondary);
								font-size: var(--gy-font-size-small);
								:deep(.gy-avatar){
									display: block;
								}
								.news-msg-user-name{
									margin-left: 15rpx;
									color: var(--gy-text-color-primary);
								}
								.news-msg-user-title{
									margin-left: 15rpx;
								}
							}
						}
						.news-msg-cover{
							width: 150rpx;
							height: 120rpx;
						    position: relative;
						    border-radius: var(--gy-border-radius-large);
						    overflow: hidden;
						    .news-msg-cover-tag{
						        position: absolute;
						        top: 0;
						        right: 0;
						        z-index: 1;
						        width: 100rpx;
						        height: 36rpx;
						        @include flex-center-center;
						        border-bottom-left-radius: var(--gy-border-radius-large);
						        font-size: 20rpx;
						        color: #ffffff;
						    }
						    .news-msg-cover-tag.primary{
						        background-color: var(--gy-color-primary);
						    }
						    .news-msg-cover-play{
						        position: absolute;
						        top: 0;
						        left: 0;
						        z-index: 2;
						        width: 100%;
						        height: 100%;
						        background-color: rgba(0, 0, 0, 0.3);
						        @include flex-center-center;
						    }
						}
					}
				}
				.advise-msg{
					.advise-msg-content{
						margin-top: 15rpx;
						font-weight: 400;
						color: var(--gy-text-color-secondary);
						font-size: var(--gy-font-size-small);
					}
				}
				.msg-praise{
					margin-top: 15rpx;
					@include flex-start-center;
					display: inline-flex;
					border-radius: 10rpx;
					overflow: hidden;
					view{
						width: 80rpx;
						height: 50rpx;
						@include flex-center-center;
						color: #FFFFFF;
						text{
							font-size: 24rpx;
						}
					}
					view:nth-child(1){
						background-color: var(--gy-color-success);
					}
					view:nth-child(2){
						background-color: var(--gy-color-error);
						text{
							transform: rotate(180deg);
						}
					}
				}
				.avatar{
					margin-right: 20rpx;
				}
			}
			.gy-im-message-time{
				height: 50rpx;
				line-height: 50rpx;
				color: #b2b0b3;
				font-size: 24rpx;
				text-align: left;
				padding-left: 100rpx;
			}
		}
		.gy-im-message-item.self{
			.gy-im-message-content{
				flex-direction: row;
				align-items: flex-start;
				.text-msg{
					background-color: var(--gy-color-primary);
					color: #FFFFFF;
					border-top-left-radius: var(--gy-border-radius-large);
					border-top-right-radius: 0rpx;
				}
				.image-msg{

				}
				.avatar{
					margin-left: 20rpx;
					margin-right: 0;
				}
			}
			.gy-im-message-time{
				text-align: end;
				padding-right: 100rpx;
			}
		}
	}
</style>
